


// img标签初始化
const imgElements = document.getElementsByTagName("img");
for (let index = 0; index < imgElements.length; index++) {
    const element = imgElements[index];
    element.setAttribute("decoding", "async");
    element.setAttribute("loading", "lazy");
}



// 导航栏
const navElements = document.getElementsByTagName("nav");
const navClick = (e) => {
        /** @type { HTMLElement } */
        const nav = e.target;
        nav.opened = !nav.opened;
        nav.classList.toggle("close");
        nav.classList.toggle("open");

        if (!e.target.classList.contains("nav") && e.target.tagName !== "NAV")
        {
            return;
        }

        if (nav.opened)
        {
            document.body.style.overflow = "hidden";
        }
        else
        {
            document.body.style.overflow = "auto";
        }

    }
for (let index = 0; index < navElements.length; index++) {
    const element = navElements[index];

    
    element.opened = false;
    element.classList.add("close");
    window.addEventListener("resize", (e) => {
        element.classList.remove("open");
    })
    element.addEventListener("click", navClick);
    element.addEventListener("touched", navClick);
    element.addEventListener("animationend", (e) => {
        /** @type { HTMLElement } */
        const nav = e.target;
        nav.style.animation = "";
    })

}



// 标签页
let tabBarActiveIndex = 0;
const tabBarTabElements = document.getElementsByClassName("tabs-bar-tab");
const tabContentElements = document.getElementsByClassName("tabs-content");
if (tabBarTabElements.length != 0)
{
    tabBarTabElements[tabBarActiveIndex].classList.add("active");
    tabContentElements[tabBarActiveIndex].classList.add("show");
}
for (let index = 0; index < tabBarTabElements.length; index++) {
    const element = tabBarTabElements[index];

    element.addEventListener("click", (e) => {
        const t = e.target;
        tabBarTabElements[tabBarActiveIndex].classList.remove("active");
        tabContentElements[tabBarActiveIndex].classList.remove("show");
        

        for (let j = 0; j < tabBarTabElements.length; j++) {
            const element = tabBarTabElements[j];
            if (element === t)
                tabBarActiveIndex = j;
        }

        t.classList.add("active");
        tabContentElements[tabBarActiveIndex].classList.add("show");
    });
}



// 分页器
const paginationElements = document.getElementsByClassName("pagination");
for (let index = 0; index < paginationElements.length; index++) {
    const element = paginationElements[index];
    
    const previousButton = document.createElement("button");
    const nextButton = document.createElement("button");
    const pageInput = document.createElement("input");
    const span = document.createElement("span");
    const pageCountStrong = document.createElement("strong");

    pageCountStrong.innerHTML = element.getAttribute("pageCount") || element.getAttribute("page-count") ||  1;
    const pageCount = pageCountStrong.innerHTML;

    // span
    span.innerHTML = "/";

    pageInput.name = "page";
    pageInput.type = "number";
    pageInput.required = "true";
    pageInput.placeholder = "页码";
    pageInput.min = 1;
    pageInput.max = pageCount;
    pageInput.value = 1;
    pageInput.onchange = (e) => {
        const input = e.target;
        if (!input.value)
            input.value = 1;
        if (input.value < 1)
            input.value = 1;
        if (input.value > input.max)
            input.value = input.max;
    }


    previousButton.innerHTML = "<";
    nextButton.innerHTML = ">";

    previousButton.onclick = (e) => {
        if (pageInput.value > 1)
            pageInput.value--;
    }
    nextButton.onclick = (e) => {
        if (pageInput.value < pageCount)
            pageInput.value++;
    }
    

    element.appendChild(previousButton);
    element.appendChild(pageInput);
    element.appendChild(span);
    element.appendChild(pageCountStrong)
    element.appendChild(nextButton);
}




